<template>
  <section>
    <el-form :inline="true"
             :model="filterData"
             class="demo-form-inline">
      <div>
        <el-form-item label="合同编号"
                      class="form-input">
          <el-input v-model="filterData.contractNo"
                    placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="发货时间">
          <el-date-picker v-model="filterData.fromTime"
                          type="daterange"
                          range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
      </div>
      <div>
        <el-form-item>
          <el-button type="primary"
                     icon="el-icon-search"
                     @click="handleSearch">查询</el-button>
          <el-button type="primary"
                     icon="el-icon-delete"
                     @click="handleReset">清除</el-button>
        </el-form-item>
      </div>
    </el-form>
    <el-card class="table-box">
      <el-row>
        <el-col v-if="!records.length"
                :span="24">
          <div class="box-wrap text-center">
            <img class="empty_img mt100"
                 :src="emptyImg"
                 alt="" />
            <div class="tips">暂 无 数 据</div>
          </div>
        </el-col>
        <el-col v-else
                :span="24">
          <ul class="box-wrap">
            <li v-for="(item, index) in records"
                :key="index"
                class="photo-list">
              <Thumbnail :label="item.contractNo"
                         :src="item.url"
                         :preview-srcs="previewSrcs" />
            </li>
          </ul>
        </el-col>
        <el-col :span="24">
          <el-pagination background
                         class="pagination-box"
                         layout="total, sizes, prev, pager, next, jumper"
                         :total="total"
                         :page-sizes="pageSizeOptions"
                         :page-size.sync="pageSize"
                         :current-page.sync="pageNo"
                         @size-change="handleSizeChange"
                         @current-change="handleCurrentChange">
          </el-pagination>
        </el-col>
      </el-row>
    </el-card>
  </section>
</template>

<script>
import { order } from "@/api/index"
import Thumbnail from "@basic/Thumbnail.vue"

export default {
  name: "OrderReceiptPhoto",
  components: { Thumbnail },
  props: {
    actions: {
      type: Array
    }
  },
  data () {
    return {
      pageNo: 1,
      pageSize: 60,
      records: [],
      total: 0,
      emptyImg: require("@/static/images/no_data.png"),
      pageSizeOptions: [60, 120],
      filterData: {},
      filters: [
        { name: "contractNos", label: "合同编号", type: "advance", component: { "@name": "InputMultiple" } },
        { name: "fromTime", label: "发货时间", type: "daterange" }
      ],
      loading: true
    };
  },
  computed: {
    previewSrcs () {
      return this.records?.map(({ url }) => url)
    },
    mergedFilterData () {
      return {
        ...this.filterData,
        page: this.pageNo,
        size: this.pageSize,
        types: [0, 1, 5, 6, 7, 8],
        sort: [{ name: "fromTime", asc: false }]
      };
    }
  },
  created () {
    this.handleSearch(this.filterData);
  },
  methods: {
    handleAction (action) {
      this.$emit("action", action);
    },
    handleClick (action) {
      this.$emit("action", action);
    },
    handleSizeChange () {
      this.handleSearch();
    },
    handleCurrentChange () {
      this.handleSearch();
    },
    async handleSearch (filterData) {
      this.filterData = Object.assign(
        { ...this.mergedFilterData },
        { ...filterData }
      );
      // if (this.filterData.contractNos) {
      //   this.filterData.contractNos =
      //     this.filterData.contractNos.indexOf(",") != -1
      //       ? this.filterData.contractNos.split(",")
      //       : [this.filterData.contractNos];
      // }
      if (this.filterData.fromTime?.length) {
        this.filterData.fromTimeBegin = this.$moment(
          this.filterData.fromTime[0]
        ).format("YYYY-MM-DD 00:00:00");
        this.filterData.fromTimeEnd = this.$moment(
          this.filterData.fromTime[1]
        ).format("YYYY-MM-DD 23:59:59");
      }
      let { data, code, message } = await order.ordeAttachmentList(this.filterData);

      this.records = data.records;
      this.total = data.total;
      if (code !== 0) {
        this.$message.error(message);
      }
    },
    handleReset (filterData) {
      this.pageNo = 1;
      this.pageSize = 60;
      this.filterData = filterData;
      this.handleSearch(this.mergedFilterData);
    }
  }
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.demo-form-inline {
  background: var(--prev-bg-white);
  padding: 20px;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.demo-form-inline >>> .el-form-item--small.el-form-item {
  margin-bottom: 0px;
}
.demo-form-inline >>> .el-range-editor--small.el-input__inner {
  height: 36px;
  line-height: 36px;
}
.demo-form-inline >>> .el-form-item__label {
  height: 36px;
  line-height: 36px;
}
.demo-form-inline >>> .el-range-editor--small .el-range-separator {
  line-height: 30px;
}
.form-input >>> .el-input--small .el-input__inner {
  height: 36px;
  line-height: 36px;
}
.photo-list {
  float: left;
  margin-right: 10px;
  width: 100px;
  margin-bottom: 10px;
}
.box-wrap {
  height: calc(100vh - 245px);
  overflow-y: scroll;
}
.tips {
  line-height: 60px;
  color: var(--prev-color-text-lightgrey);
}
.mt100 {
  margin-top: 100px;
}
</style>
